<template>
  <b-col>
    <b-row v-for="dynamic in dynamicList.data" :key="dynamic.id" class="bg-white dyCard border-top rounded-lg shadow-sm mt-2">
      <b-col class="shadow-sm">
        <!-- 帖子卡片第一行 昵称头像和时间 -->
        <UserInfoView :type="1" :user="dynamic.user" :time="dynamic.time" />
        <!-- 帖子内容 第一个版本 -->
        <b-row>
          <b-col>
            <b-link @click="toDetail(dynamic.id)" class="text-decoration-none">
              <p class="content overflow-hidden">
                {{dynamic.content}}
              </p>
            </b-link>
          </b-col>
        </b-row>
        <!-- 图片栏位 最多一个张大图 -->
        <ImageView v-if="dynamic.imageUrl != null" :img="dynamic.imageUrl" />
        <!-- 功能交互 -->
        <b-row class="text-right justify-content-end py-2">
          <b-col class="col-auto">
            <span class="iconfont icon-good">{{dynamic.likeNum}}</span>
          </b-col>
          <b-col class="col-auto">
            <span class="iconfont icon-comment text-right">{{dynamic.commentNum}}</span>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <b-row v-if="loading" align-v="end" class="py-2 px-1">
      <b-col class="h-100 text-center">
        <b-spinner md /> 加载中
      </b-col>
    </b-row>
    <b-row v-if="loading" style="height:800px" />
    <b-row v-if="isAll&&loading==false" align-v="end" class="bg-white py-2 px-1 rounded">
      <b-col class="text-center">
        Σ(っ °Д °;)っ这就到底了!
      </b-col>
    </b-row>
  </b-col>
</template>

<script>
import tool from '@/utils/tool';
import ImageView from './ImageView'
import UserInfoView from '@/components/UserInfoView'
export default {
  name: 'SocialCard',
  components: {
    ImageView,
    UserInfoView,
  },
  data() {
    return {
      // 动态数据
      dynamicList: {
        data: [],
      },
      //已到底部
      isAll: false,
      loading: true,
    }
  },
  methods: {
    //跳转到详情
    toDetail(id) {
      this.$pageRedirect.toADDetails(id, "dynamic");
    },

    //时间转换
    getTime(time) {
      return tool.transTime(time);
    },

    //加载新内容
    loadingMore() {
      if (this.dynamicList.page * this.dynamicList.size >= this.dynamicList.total) {
        this.isAll = true;
        this.loading = false;
        return
      }
      this.loading = true;
      //获取下一页
      this.$httpIssue.getDynamic(this.dynamicList.page + 1).then((res) => {
        var newData = this.dynamicList.data;
        for (let i = 0; i < res.data.length; i++) {
          newData.push(res.data[i]);
        }
        this.dynamicList = res;
        this.loading = false;
        this.dynamicList.data = newData;
      });

    },

    //监听滚动条
    scrolling() {
      var scrollTop = tool.getScrollTop();
      var clientHeight = tool.getClientHeight()
      var scrollHeight = tool.getScrollHeight()
      // console.log("滚动条:", scrollTop, "\n", "可视容器", clientHeight, "\n", "滚动条高度:", scrollHeight, "\n", "位置+高度:", scrollTop + clientHeight);
      if (scrollTop + clientHeight >= scrollHeight - 1 && this.loading == false) {
        this.loadingMore();
      }
    },
  },
  mounted() {
    // 添加监听事件
    window.addEventListener("scroll", this.scrolling);
  },
  created() {
    //获取数据库动态信息
    this.$httpIssue.getDynamic(1).then((res) => {
      if (res == "timeOut") {
        this.loading = false;
        this.isAll = true;
        return
      }
      this.dynamicList = res;
      this.loading = false;
    });
  },
  destroyed() {
    // 销毁监听事件
    window.removeEventListener("scroll", this.scrolling);
  }
}
</script>

<style scoped>
.dyCard div a,
.dyCard div span {
  font-size: 18px;
  font-family: HYZhengYuan-55S;
  color: black;
}
.content {
  font-size: 18px;
  color: black;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4; /* 要显示的行数 */
  -webkit-box-orient: vertical;
}
.content:hover {
  color: rgb(77, 76, 76);
}
.image {
  max-height: 380px;
}
.image2 {
  height: 188px;
}
</style>